import React from "react";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Autoplay, Navigation, EffectFade } from "swiper";
import SliderData from "@/data/slider";
import Section from './other/Section'

SwiperCore.use([Autoplay, Navigation, EffectFade]);

const Slider = (props) => {
    const mainSlideOptions = {
        spaceBetween: props.space,
        slidesPerView: props.perview,
        autoplay: true,
        loop: true,
        effect: props.effect,
        navigation: true,
        autoplay: {
            delay: props.time
        }
    };
    return (
        <div className="swiper-container w-100" style={{
            "--swiper-theme-color": "#ffffff",
            "--swiper-navigation-color": "#ffffff",
            "--swiper-navigation-size": "30px"
        }}>
            <Swiper {...mainSlideOptions}>
                {props.data.map(({ image, subText, title, button }, index) => (
                    <SwiperSlide key={index}>
                        <Section img={image} rgba={props.rgba} height={props.height} className="mh-100 container">
                            <div className="text-center" style={{ "margin-top": "25%" }}>
                                <p className="text-light">{subText ? subText : ""}</p>
                                <h3 className="title text-white mb-4">{title ? title : ""}</h3>
                                {button ?
                                    <Link href={button.url ? button.url : "#"}>
                                        <a className={`btn btn-warning`}>
                                            <span>{button.label ? button.label : ""}</span>
                                        </a>
                                    </Link>
                                    :
                                    ""
                                }
                            </div>
                        </Section>
                    </SwiperSlide>
                ))}
            </Swiper>
        </div>
    );
};

Slider.defaultProps = {
    space: 0,
    perview: 1,
    time: 3000,
    effect: "fade",  //fade|cube|coverflow(多图)|flip
    data: SliderData,
    height: "500px",
    rgba: "0,0,200,0.5"
}
export default Slider;
